一、水平居中系列
-
inline或者inline-*元素
.center-children { text-align: center; }
inline、inline-block、inline-table、inline-flex等有效
-
一个块级元素
.center{ margin:0 auto; }
- 多个块级元素
使用inline-block和text-align配合或者使用flex
二、垂直居中系列
-
inline或者inline-*元素
1、单行:上下添加相等的内边距.link { padding-top: 30px; padding-bottom: 30px; }
2、多行:
// 可以模拟表格 .center-table{ display:table; } .center-table children{ display:table-cell; vertical-align:center; }
// 可以使用flexbox .flex-center-vertically { display: flex; justify-content: center; flex-direction: column; height: 400px; }
-
块级元素
-
知道块级元素的高度
.parent { position: relative; } .child { position: absolute; top: 50%; height: 100px; margin-top: -50px; box-sizing: border-box; */ }
-
不知道块级元素的高度
.parent { position: relative; } .child { position: absolute; top: 50%; transform: translateY(-50%); }
-
使用flexbox
.parent { display: flex; flex-direction: column; justify-content: center; }
-
三、居中(垂直和水平)
-
固定宽度和高度
.parent { position: relative; } .child { width: 300px; height: 100px; padding: 20px; position: absolute; top: 50%; left: 50%; margin: -70px 0 0 -170px; }
-
不知道宽度和高度
.parent { position: relative; } .child { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
-
使用flexbox
.parent { display: flex; justify-content: center; align-items: center; }
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。